<template>
  <div>
    <a-card :bordered="false">
      <!-- 查询区域 -->
      <div>
        <a-form @keyup.enter.native="searchQuery">
          <a-row :gutter="24">
            <a-col :md="6" :sm="12">
              <a-form-item label="字典编码" :label-col="labelCol" :wrapper-col="wrapperCol">
                <a-input v-model="queryParam.dictCode" placeholder="请输入字典编码" />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="12">
              <a-form-item label="字典名称" :label-col="labelCol" :wrapper-col="wrapperCol">
                <a-input v-model="queryParam.dictName" placeholder="请输入字典名称" />
              </a-form-item>
            </a-col>
            <template v-if="toggleSearchStatus">
              <a-col :md="6" :sm="8">
                <a-form-item label="字典类别" :label-col="labelCol" :wrapper-col="wrapperCol">
                  <a-select v-model="queryParam['dictType@EQ']" placeholder="请选择">
                    <a-select-option value="">请选择</a-select-option>
                    <a-select-option value="1">系统字典</a-select-option>
                    <a-select-option value="2">业务字典</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </template>

            <a-col :md="6" :sm="8">
              <a-form-item>
                <a-button type="primary" icon="search" @click="searchQuery()">查询</a-button>
                <a-button type="primary" icon="reload" style="margin-left: 8px" @click="searchReset()">重置</a-button>
                <a style="margin-left: 8px" @click="handleToggleSearch">
                  {{ toggleSearchStatus ? '收起' : '展开' }}
                  <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
                </a>
              </a-form-item>
            </a-col>

          </a-row>
        </a-form>
      </div>

      <!-- table区域-begin -->
      <div>
        <vxe-grid
          id="DictList"
          ref="vxeTable"
          v-bind="gridOptions"
          :expand-config="{accordion: true,reserve:true}"
          :row-config="{isCurrent:true,keyField:'id'}"
          v-on="listeners"
        >
          <template #dictText="{row,column}">
            <span>{{ getDictText(row[column.field]) }}</span>
          </template>
          <template #action="{ row }">
            <template>
              <a @click="handleEdit(row)">编辑</a>
              <a-divider type="vertical" />
              <a-dropdown>
                <a class="ant-dropdown-link">
                  更多 <a-icon type="down" />
                </a>
                <a-menu slot="overlay">
                  <a-menu-item>
                    <a @click="handleAddItem(row)">新增字典项</a>
                  </a-menu-item>
                  <a-menu-item>
                    <a href="javascript:;" @click="handleDetail(row)">详情</a>
                  </a-menu-item>
                  <a-menu-item>
                    <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(row.id)">
                      <a>删除</a>
                    </a-popconfirm>
                  </a-menu-item>
                </a-menu>
              </a-dropdown>
            </template>
          </template>
          <template #content="{ row }">
            <div :style="{width:innerTableWidth}">
              <vxe-grid
                border
                resizable
                align="center"
                :columns="subCol"
                :data="row.items || []"
                style="margin:20px;"
              >
                <template #action="{ row:record }">
                  <a @click="handleEditItem(row,record)">编辑</a>
                  <a-divider type="vertical" />
                  <a-popconfirm title="确定删除吗?" @confirm="() => handleCancelItem(record.id)">
                    <a>删除</a>
                  </a-popconfirm>
                </template>
              </vxe-grid>
            </div>
          </template>
        </vxe-grid>
      </div>
      <!-- table区域-end -->
      <dict-modal ref="modalForm" @ok="modalFormOk" />
      <DictItemModal ref="dictItemModal" :code="code" @ok="modalFormOk" />
    </a-card>
  </div>
</template>

<script>
import DictModal from './modules/DictModal'
import DictItemModal from './modules/DictItemModal'
import VxeTableListMixin from '@/mixins/VxeTableListMixin'
import { deleteAction } from '@/services/manage'
export default {
  name: 'DictList',
  components: {
    DictModal,
    DictItemModal
  },
  mixins: [VxeTableListMixin],
  data() {
    return {
      columns: [
        { type: 'expand', width: 40, slots: { content: 'content' }},
        { type: 'checkbox', width: 40 },
        { type: 'seq', width: 40 },
        {
          title: '字典编码',
          field: 'dictCode',
          sortable: true
        },
        {
          title: '字典名称',
          field: 'dictName'
        },
        {
          title: '默认值',
          field: 'dictDefaultValue'
        },
        {
          title: '描述',
          field: 'dictDesc'
        },
        {
          title: '字典类别',
          field: 'dictType',
          slots: { default: ({ row }) => {
            return row.dictType === '1' ? '系统字典' : '业务字典'
          } }
        },
        {
          title: '操作',
          field: 'action',
          slots: { default: 'action' },
          width: 170
        }
      ],
      subCol: [
        { type: 'seq', width: 40 },
        {
          title: '名称',
          field: 'itemText',
          sorter: true
        },
        {
          title: '数据值',
          field: 'itemValue'
        },
        {
          title: '描述',
          field: 'itemDesc'
        },
        {
          title: '操作',
          slots: { default: 'action' },
          width: 170
        }
      ],
      url: {
        list: '/sys/dict/tree/page',
        delete: '/sys/dict/remove/',
        deleteItem: '/sys/dict/remove/item/',
        deleteBatch: '/sys/dict/remove/'
      },
      innerTableWidth: 600,
      code: '',
      toolbarConfig: {
      // slots: {
      //   tools: 'toolbar_tools'
      // }
      },
      sortConfig: {
        defaultSort: {
          field: 'dictCode',
          order: 'desc'
        }
      }
    }
  },
  mounted() {
    setTimeout(() => {
      const columns = this.$refs.vxeTable.getColumnByField('action')
      const tableWidth = this.$refs.vxeTable.$el.clientWidth
      this.innerTableWidth = (tableWidth - columns.width - 30) + 'px'
    }, 200)
  },
  methods: {
    refleshCache() {
      console.log(111)
    },
    handleAddItem(row) {
      this.code = row.dictCode
      this.$refs.dictItemModal.add()
      this.$refs.dictItemModal.title = '新增'
      this.$refs.dictItemModal.disableSubmit = false
    },
    handleEditItem(row, record) {
      this.code = row.dictCode
      this.$refs.dictItemModal.edit(record)
      this.$refs.dictItemModal.title = '编辑'
      this.$refs.dictItemModal.disableSubmit = false
    },
    handleCancelItem(id) {
      deleteAction(`${this.url.deleteItem}${id}`).then((res) => {
        if (res.success) {
          this.$message.success(res.message)
          this.loadData()
        } else {
          this.$message.warning(res.message)
        }
      })
    }
  }
}
</script>

